/*! Gray v1.4.2 (https://github.com/karlhorky/gray) | MIT */
.grayscale {
	/* Firefox 10-34 */
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");

	/*
		Chrome 19+,
		Safari 6+,
		Safari 6+ iOS,
		Opera 15+
	  */
	-webkit-filter: grayscale(1);

	/* Firefox 35+ */
	filter: grayscale(1);

	/* IE 6-9 */
	filter: gray;
}

.grayscale.grayscale-fade {
	transition: filter .5s;
}

/* Webkit hack until filter is unprefixed */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	.grayscale.grayscale-fade {
		-webkit-transition: -webkit-filter .5s;
		transition: -webkit-filter .5s;
	}
}

@-webkit-keyframes blink {
	0% { opacity: .4;}
	50% { opacity: .7;}
	100% { opacity: 1;}
}

.blink {
	-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);
	-webkit-animation-name: blink;
	-webkit-animation-duration: 300ms;
	-webkit-animation-iteration-count: 5;
	-webkit-animation-direction: alternate;
}

.onLine .grayscale,
.grayscale.grayscale-fade:hover {
	-webkit-filter: grayscale(0);
	filter: grayscale(0);
	.blink;
}

/* Background element */
.grayscale.grayscale-replaced {
	-webkit-filter: none;
	filter: none;
}

.grayscale.grayscale-replaced > svg {
	-webkit-transition: opacity .5s ease;
	transition: opacity .5s ease;
	opacity: 1;
}

.grayscale.grayscale-replaced.grayscale-off > svg,
.onLine .grayscale.grayscale-replaced > svg,
.grayscale.grayscale-replaced.grayscale-fade:hover > svg {
	opacity: 0;
}
